<template>
  <div>
    <Header></Header>
    <Search :cities="allCities"></Search>
    <List :city="city" :cities="allCities" :letter="letter"></List>
    <Alphabet :cities="letters" @change="handleClickChange"></Alphabet>
  </div>
</template>
<script>
import Header from "./components/Header.vue";
import Search from "./components/Search.vue";
import List from "./components/List.vue";
import Alphabet from "./components/Alaphabet.vue";
import axios from "axios";
export default {
  components: {
    Header,
    Search,
    List,
    Alphabet
  },
  data() {
    return {
      city: [], //热门城市数据
      allCities: {}, //城市所有数据
      letter: "", //Alaphabet中的数据通过City.vue传到List.vue
      letters: [], //['A','B','C'......],
      lastCity: ""
    };
  },
  methods: {
    getData() {
      axios.get("/api/city.json").then(this.getDatasucc);
    },
    getDatasucc(res) {
      res = res.data;
      if (res.ret && res.data) {
        console.log(res);
        this.city = res.data.hotCities;
        this.allCities = res.data.cities;
        for (let i in this.allCities) {
          this.letters.push(i);
        }
      }
    },
    handleClickChange(letter) {
      this.letter = letter;
    }
  },
  mounted() {
    this.getData()
  }
};
</script>
<style lang="stylus" scoped></style>